<template>
  <div class="home">
    <!-- 上方头部结构 -->
    <van-nav-bar
      title="确认订单"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <!-- 地址填写结构 -->
    <div class="shippingaddress">
      <!-- 地址相关结构 -->
      <div class="addressbox">
        <div class="address" @click="onAddressClick">
          <p class="noaddress">暂未获取到收货地址</p>
          <p class="buildaddress">新建收货地址</p>
        </div>
        <!-- 右侧箭头结构 -->
        <div class="rightarrow">
          <span><van-icon name="arrow" /></span>
        </div>
      </div>
      <!-- 分割线结构 -->
      <p class="crossline"></p>
      <!-- 快递配送方式 -->
      <div class="distribution">
        <p>配送方式</p>
        <span>快递</span>
      </div>
    </div>
    <!-- 商品结构 -->
    <div class="goods">
      <!-- 商品图片 -->
      <div class="goodsimg">
        <img :src="state.orderMsg.imgurl" />
      </div>
      <!-- 商品信息 -->
      <div class="goodsmsg">
        <!-- 商品标题 -->
        <p class="goodstitle">{{ state.orderMsg.title }}</p>
        <!-- 商品评级 -->
        <span class="goodslevel">A级；请咨询客服后下单</span>
        <!-- 商品单价 -->
        <i class="goodsprice">￥{{ state.orderMsg.price }}</i>
        <!-- 商品价格合计 -->
        <p class="total">
          共<span>{{ state.orderMsg.num }}</span
          >件商品小计：<i>¥{{ state.orderMsg.price }}</i>
        </p>
      </div>
    </div>
    <!-- 引入vant组件构造优惠券结构 -->
    <div class="onsale">
      <van-coupon-cell
        :coupons="state.coupons"
        :chosen-coupon="state.chosenCoupon"
        @click="aaa"
      />
      <van-popup
        v-model:show="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="state.coupons"
          :chosen-coupon="state.chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
    <!-- 引入vant留言组件 -->
    <div class="leaveamessage">
      <van-cell-group inset>
        <van-field
          v-model="message"
          rows="1"
          autosize
          label="留言"
          type="textarea"
          placeholder="请输入留言"
        />
      </van-cell-group>
    </div>
    <!-- 协议结构 -->
    <p class="agreement">
      提交订单则表示你同意<span>《用户协议》</span> 和<span>《隐私政策》</span>
    </p>
    <!-- 结算部分 -->
    <van-submit-bar
      :price="state.orderMsg.price * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import { reactive, ref, onMounted } from "vue";
import http from "../utils/api";
import router from "../router/index.js";
// 优惠券组件数据
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
export default {
  setup() {
    const showList = ref(false);
    const state = reactive({
      coupons: [coupon],
      chosenCoupon: -1,
      orderMsg: {
        title: "",
        price: "",
        imgurl: "",
        num: "",
      },
    });
    // 点击左箭头返回上一页
    const onClickLeft = () => {
      router.push("/product");
    };
    // 点击地址时跳转地址设置页面
    const onAddressClick = () => {
      router.push("/newAddress");
    };
    // 接收后端数据
    onMounted(() => {
      http.getOrderDataApi({}).then((res) => {
        res.data.data[0].num = "1";
        state.orderMsg = res.data.data[0];
      });
    });
    // 优惠券列表点击事件
    const onChange = (index) => {
      showList.value = false;
      state.chosenCoupon = index;
    };
    const onExchange = () => {
      state.coupons.push(coupon);
    };

    const aaa = () => {
      showList.value = true;
    };
    // 点击跳转代付款页面
    const onSubmit = () => Toast("支付窗口");
    return {
      onSubmit,
      aaa,
      showList,
      state,
      onChange,
      onExchange,
      disabledCoupons: [coupon],
      onClickLeft,
      onAddressClick,
    };
  },
};
</script>
<style lang="less">
.home {
  /* 左侧箭头样式 */
  .van-icon-arrow-left {
    font-size: 20px;
    color: black;
  }
  /* 标题样式 */
  .van-nav-bar__title {
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  /* 整个地址盒子样式 */
  .shippingaddress {
    width: 350px;
    height: 125px;
    background: #ffffff;
    border-radius: 10px;
    margin: auto;
    margin-top: 10px;
    /* 地址内容样式 */
    .addressbox {
      height: 75px;
      .address {
        text-indent: 16px;
        width: 300px;
        float: left;
        .noaddress {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #272727;
          line-height: 46px;
        }
        .buildaddress {
          height: 29px;
          font-size: 17px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #323232;
        }
      }
      /* 右边箭头样式 */
      .rightarrow {
        text-align: center;
        float: right;
        width: 48px;
        font-size: 18px;
        height: 75px;
        line-height: 75px;
      }
    }
    /* 分割线样式 */
    .crossline {
      width: 330px;
      height: 1px;
      background: #f4f5f4;
      margin: auto;
    }
    /* 配送方式样式 */
    .distribution {
      height: 51px;
      text-indent: 16px;
      /* 左侧文字 */
      p {
        width: 200px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #323232;
        line-height: 51px;
        float: left;
      }
      /* 右侧文字 */
      span {
        display: block;
        width: 128px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #323232;
        float: right;
        text-align: right;
        line-height: 51px;
        margin-right: 16px;
      }
    }
  }
  /* 商品样式 */
  .goods {
    height: 170px;
    width: 350px;
    margin: auto;
    margin-top: 10px;
    border-radius: 10px;
    background: #ffffff;
    /* 商品图片样式 */
    .goodsimg {
      width: 97px;
      float: left;
      img {
        width: 86px;
        height: 86px;
        display: block;
        float: right;
        margin-top: 10px;
        border-radius: 5px;
      }
    }
    /* 商品信息样式 */
    .goodsmsg {
      width: 251px;
      float: right;
      padding: 10px;
      /* 商品标题样式 */
      .goodstitle {
        width: 237px;
        height: 51px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 700;
        color: #080e19;
        line-height: 19px;
      }
      /* 商品等级样式 */
      .goodslevel {
        display: block;
        width: 138px;
        height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #8e8f92;
        margin-top: 9px;
      }
      /* 商品单价 */
      .goodsprice {
        display: block;
        width: 71px;
        height: 11px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #080e19;
        line-height: 19px;
        margin-top: 21px;
      }
      /* 总价计算 */
      .total {
        height: 13px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        margin-top: 30px;
        margin-left: 55px;
        position: relative;
        i {
          width: 71px;
          height: 11px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #fa3b39;
        }
      }
    }
  }
  /* 优惠券样式 */
  .onsale {
    width: 350px;
    height: 40px;
    background: #ffffff;
    margin: auto;
    margin-top: 5px;
    border-radius: 10px;
    .van-cell {
      border-radius: 10px;
    }
  }
  /* 留言样式 */
  .leaveamessage {
    width: 350px;
    height: 40px;
    background: #ffffff;
    border-radius: 10px;
    margin: auto;
    margin-top: 10px;
    .van-cell-group {
      width: 350px;
      height: 40px;
      margin: 0;
    }
  }
  /* 协议样式 */
  .agreement {
    width: 270px;
    height: 12px;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    margin-left: 24px;
    margin-top: 10px;
    span {
      color: #61739b;
    }
  }
  /* 提交订单栏样式 */
  .van-submit-bar__text {
    text-align: left;
    span {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
    }
    /* 总价格样式 */
    .van-submit-bar__price {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fa403f;
      .van-submit-bar__price-integer {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #fa403f;
      }
    }
  }
  /* 按钮样式 */
  .van-button--danger {
    width: 110px;
    height: 40px;
    padding: 10px;
    .van-button__text {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
</style>
